<template>
  <a-list
    item-layout="horizontal"
    :grid="{ gutter: 16, xs: 4, sm: 4, md: 4, lg: 4, xl: 4, xxl: 4 }"
    :data-source="props.userList">
    <template #renderItem="{ item }">
      <a-card hoverable style="width: 240px" >
        <template #cover>
          <img alt="example" :src="item.avatar" />
        </template>
        <a-card-meta :title="item.nikename">
          <template #description>{{ item.userProfile }}</template>
        </a-card-meta>
      </a-card>
    </template>
  </a-list>
</template>

<script setup lang="ts">
import { withDefaults, defineProps, toRefs } from "vue";
import yaqianJPG from "@/assets/yq.jpg";

interface Props {
  userList: any[];
}

const props = withDefaults(defineProps<Props>(), {
  userList: () => [],
});
</script>

<style scoped>
.gege {
  width: 200px;
}
</style>
